<template>
    <div>
        <my-nvaigation-bar></my-nvaigation-bar>
        <div id="Glxt_containner">
            <el-row>
                <el-col :span="24" id="Glxt_bigtitle">用户管理userInfo</el-col>
            </el-row>
<!--查询表单-->
<el-card shadow="never">
  <el-form :inline="true" class="demo-form-inline">
  <el-form-item label="昵称">
    <el-input v-model="searchObj.name" placeholder="用户的昵称" /> 
  </el-form-item>
  <el-form-item label="花花号">
    <el-input v-model="searchObj.hhid" placeholder="用户的花花号" /> 
  </el-form-item>
  <el-form-item label="邮箱">
    <el-input v-model="searchObj.email" placeholder="用户的邮箱" /> 
  </el-form-item>
  <el-form-item label="性别">
    <el-select v-model="searchObj.sex" clearable placeholder="用户的性别">
      <el-option value="1" label="男"/>
      <el-option value="0" label="女"/>
    </el-select>
  </el-form-item>
  <el-form-item label="权限">
    <el-select v-model="searchObj.limits" clearable placeholder="用户的身份">
      <el-option value="1" label="管理员"/>
      <el-option value="0" label="普通用户"/>
    </el-select>
  </el-form-item>

    <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
    <el-button type="default" @click="resetData()">清空</el-button>
</el-form>
</el-card>
            <el-table :data="list" style="width: 100%">
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="avatar" label="头像">
                    <template slot-scope="scope">
                        <img :src="scope.row.avatar" style="width: 33px; height: 33px;"/>
                    </template>    
                </el-table-column>
                <el-table-column prop="hhid" label="花花号"></el-table-column>
                <el-table-column prop="nickName" label="昵称"></el-table-column>
                <el-table-column label="性别">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.sex === 0" type="success" size="mini">女</el-tag>
                        <el-tag v-if="scope.row.sex === 1" size="mini">男</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="password" label="密码"></el-table-column>
                <el-table-column prop="brief" label="详情"></el-table-column>
                <el-table-column label="权限">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.limits === 0" type="success" size="mini">普通用户</el-tag>
                        <el-tag v-if="scope.row.limits === 1" size="mini">管理员</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column prop="updateTime" label="修改时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="editClick(scope.row.id)" type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small" @click="deleteClick(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-row>
                <el-col :span="24"><el-pagination background layout="prev, pager, next" :total="total" :current-page="page" @current-change="changeCurrentPage"></el-pagination></el-col>
            </el-row>

            <el-drawer
            title="编辑用户信息"
            :visible.sync="drawer"
            with-header=true
            :before-close="handleClose">
            <div style="padding:30px">
                <el-form ref="editUser" :model="form" label-width="60px">
                    <el-form-item label="ID">
                        <el-input v-model="editUser.id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="头像">
                        <el-upload class="avatar-uploader"
                                action= "http://localhost:8333/user/userInfo/upload"
                                :show-file-list="false"
                                :on-success="handleSuccess"
                                ref="upload">
                            <img v-if="img" :src="img" class="image"/>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="花花号">
                        <el-input v-model="editUser.hhid"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="editUser.nickName"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio v-model="editUser.sex" :label="1" border>男</el-radio>
                        <el-radio v-model="editUser.sex" :label="0" border>女</el-radio>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="editUser.email"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="editUser.password"></el-input>
                    </el-form-item>
                    <el-form-item label="简介">
                        <el-input v-model="editUser.brief"></el-input>
                    </el-form-item>
                    <el-form-item label="权限">
                        <el-radio v-model="editUser.limits" :label="1" border>管理员</el-radio>
                        <el-radio v-model="editUser.limits" :label="0" border>普通用户</el-radio>
                    </el-form-item>
                    <div style="margin-top: 10px;">
                        <el-button type="primary" @click="onSubmit">完成</el-button>
                    </div>
                    
                </el-form>
            </div>
            </el-drawer>
        </div>
    </div>
</template>

<script>
import MyNvaigationBar from '../../components/MyNvaigationBar.vue';
import UserInfoApi from "../../api/mime/userinfo.js"

export default {
    components: { MyNvaigationBar },
    data() {
        return {
            list: [], // userInfo列表
            total: 0, // 总记录数
            page: 1, // 页码
            limit: 10, // 每页记录数
            searchObj: {}, // 查询条件
            multipleSelection: [],// 批量删除选中的记录列表
            drawer: false,
            editUser: {}, //修改用户信息的内容
            img: ''
        }
    },
    //页面渲染成功后获取数据
    methods: {
        handleSuccess (response, file, fileList) {
            console.log(response)
              this.editUser.avatar = `http://localhost:8333/user/userInfo/download?name=${response.data}`
              this.img = this.editUser.avatar
          },
        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page
            this.fetchData()
        },
        //编辑信息
        editClick(id) {
            this.drawer = true;
            UserInfoApi.getUserById(id)
            .then(res => {
                this.editUser = res.data.data
                this.img = this.editUser.avatar
                console.log(this.editUser)
            })
        },
        //编辑信息关闭提醒
        handleClose(done) {
        this.$confirm('确定退出编辑用户信息？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        },
        //修改用户信息
        onSubmit() {
            this.$confirm('你确定要更改用户信息吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                return UserInfoApi.updateUser(this.editUser)
            }).then((res) => {
                console.log(res.data.code)
                console.log(res.data.message)
                console.log(res.data.code != 201)
                console.log(res.data.code !== 201)
                if (res.data.code == 200) {
                    this.$message.success(res.data.message)
                    this.fetchData()
                    this.drawer = false
                } else {
                    this.$message.error(res.data.message);
                }
            }).catch(err => {
                if (err === 'cancel') {
                    this.$message.info('取消编辑')
                }
            })
        },
        // 重置表单
        resetData() {
            this.searchObj = {}
            this.fetchData()
        },
        //删除用户
        deleteClick(id) {
            this.$confirm('你确定要删除'+id+'号用户吗','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                return UserInfoApi.remove(id)
            }).then((res) => {
                this.fetchData()
                this.$message.info(res.data.message)
            }).catch(err => {
                if (err === 'cancel') {
                    this.$message.info('取消删除')
                }
            })
            
            
        },
        //初始化
        fetchData() {
            UserInfoApi.pageList(this.page, this.limit, this.searchObj)
            .then(res => {
                this.list = res.data.data.records
                this.total = res.data.data.total
            })
        },
    },
    created() {
        this.fetchData()
    },
}

</script>

<style>
    #Glxt_containner{
        width: auto;
        height: auto;
        border:3px dashed #42b983;
        padding-top: 8px;
        padding-bottom: 8px;
        border-radius: 8px;
        margin-top: 10px;
    }

    #Glxt_bigtitle {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: bolder;
    color:#42b983;
    }

    .image{
        width: 100%;
        height: 324px;
    }

</style>